<template>
	<view class="tabs">
		<view class="content">
			<scroll-view scroll-x>
				<view class="scroll-content">
					<view
						class="scroll-item"
						:class="{active: activeIndex === index}"
						v-for="(item, index) in list"
						:key="index"
						@click="clickTab(item, index)">{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="tab-icons">
			<uni-icons type="gear" sze="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				defauly() {
					return []
				}
			},
			tabIndex: {
				type: Number,
				default: 0
			}
		},
		watch: {
			// 监听值得变化
			tabIndex(newVal, oldVal) {
				this.activeIndex = newVal
			}
		},
		data() {
			return {
				activeIndex: 0
			}
		},
		methods: {
			clickTab(item, index) {
				this.activeIndex = index
				this.$emit('tabClick', {
					item,
					index
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		width: 100%;
		position:relative;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		.content {
			flex: 0 0 1;
			.scroll-content {
				height: 90rpx;
				display: flex;
				align-items: center;
				flex-wrap: no-wrap;
				box-sizing: border-box;
				.scroll-item {
					flex-shrink: 0;
					padding: 0 20rpx;
					color: #333;
					font-size: 14px;
					&.active {
						color: $base-color;
					}
				}
			}
		}
		.tab-icons {
			position: relative;
			width: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			&::after {
				content: '';
				position: absolute;
				left: 6rpx;
				width: 1px;
				height: 100%;
				background-color: #ddd;
			}
		}
	}
</style>
